<template>
    <div>
        <input type="text" v-model="msg">
        <input type="button" value="发表" @click="add">
        <ul>
            <li v-for="(value, index) in notes" :key="index">
                <span>{{value}}</span>
                <a href="javascript:;" @click="del(index)">删除</a>
            </li>
        </ul>
        <p v-if="notes.length">留言总数：{{notes.length}}条</p>
        <p v-else>还没有人发表留言，快来发表一则留言吧</p>
        <input type="button" v-show="notes.length" value="删除所有" @click="delall">
    </div>
</template>

<script>
export default {
    name: " Home",
    data() {
        return {
            notes: localStorage.notes ? JSON.parse(localStorage.notes) : [],
            msg: '',
        }
    },
    methods: {
        add() {
            if (this.msg) {
                this.notes.unshift(this.msg);
                localStorage.notes = JSON.stringify(this.notes)
                this.msg = "";
            }
        },
        del(index) {
            this.notes.splice(index, 1)
            localStorage.notes = JSON.stringify(this.notes)
        },
        delall() {
            this.notes = []
            localStorage.notes = JSON.stringify(this.notes)
        }
    }
}
</script>

<style scoped>

</style>
